import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal, message, Button, Tag,Spin,Tabs  } from "antd";

import { WeaLocaleProvider, WeaTop, WeaRightMenu, WeaTab, WeaReqTop, WeaDialog, WeaTag,WeaAlertPage,WeaDatePicker} from 'ecCom';
import './index.css';
import { WeaTableNew } from "comsMobx";
import {Condition} from '../list/listCondition';
import {Text} from '../util/text';
const text = new Text();
const TabPane = Tabs.TabPane;

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject("infoCreateNotifStore")
@observer
class infoCreateNotif extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            
        }
    }

    componentDidMount() {
        const {infoCreateNotifStore} = this.props;
        infoCreateNotifStore.doHandleDate();
        infoCreateNotifStore.getModeSearchUrl();
        
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            const {infoCreateNotifStore} = this.props;
            infoCreateNotifStore.doHandleDate();
            infoCreateNotifStore.getModeSearchUrl();
        }
    }

    render() {
        const { infoCreateNotifStore} = this.props;
        const {selectedKey,dateValue,tnjcurl,szyxxxurl,status:{disabled1,disabled2,disabled3,disabled4},changeDateSelect} = infoCreateNotifStore;
        let scrollHeight = document.body.clientHeight - 129;
        let  iframestyle1 = { display: (  selectedKey == 1 ) ? "" : "none",backgroundColor: '#fff', };
        let  iframestyle2 = { display: (  selectedKey == 2 ) ? "" : "none",backgroundColor: '#fff', };
       
        return (
            <div>
                 <Tabs defaultActiveKey="0" activeKey={""+selectedKey} onChange={this.callback} type="card">
                    <TabPane tab="通报年月选择" key="0" disabled={disabled1}>
                         {<div className="info-notif-dateselect" >
                        <span style={{fontSize:'25px'}}>日期选择 </span>
                                <WeaDatePicker
                                    noInput
                                    value={dateValue}
                                    format="YYYY-MM"
                                    onChange={value => changeDateSelect(value)}
                                /><br/>
                                <Button type="primary" style={{marginTop:"20px"}} onClick={()=>this.toNextStep(selectedKey)}>下一步</Button>
                        </div>}
                    </TabPane>
                    <TabPane tab="通报检查" disabled={disabled2} key="1">
                        <div className="info-notif-dateselect">
                        <Button type="primary"  onClick={()=>this.toNextStep(selectedKey)}>下一步</Button>
                        </div>
                        <div style={iframestyle1}>
                            <iframe src={tnjcurl+"&dateValue="+dateValue}
                                id="info_tbList_iframe"
                                width='100%'
                                height={scrollHeight}
                                frameborder="no"
                                border="0"
                                name="info_tbList_iframe">
                            </iframe>
                           
                        </div>
                    </TabPane>
                    
                    <TabPane tab="设置优秀信息" key="2" disabled={disabled3}>
                        <div style={iframestyle2}>
                            <iframe src={szyxxxurl+"&dateValue="+dateValue}
                                id="info_yxList_iframe"
                                width='100%'
                                height={scrollHeight}
                                frameborder="no"
                                border="0"
                                name="info_yxList_iframe">
                            </iframe>
                        </div>
                    </TabPane>
                    <TabPane tab="生成通报数据" key="3" disabled={disabled4}>
                        
                    </TabPane>
                </Tabs>
            </div>
        )
    }

    callback=(key)=>{
        const{infoCreateNotifStore}=this.props;
        infoCreateNotifStore.setSelectedKey(key);
        if(key == 3){
            infoCreateNotifStore.createNotification();
        }
    }


    toNextStep=(selectedKey)=>{
        const{infoCreateNotifStore}=this.props;
        const{ toNextStep } = infoCreateNotifStore;
        toNextStep(selectedKey);
    }

}

export default infoCreateNotif ;